<seed-content>
  <seed-toolbar-header>
    <seed-toolbar-title>战术板</seed-toolbar-title>
    <seed-toolbar-menu></seed-toolbar-menu>
  </seed-toolbar-header>
  <div class="tactical-info">
    <div class="tactical-title">信息</div>
    <ul class="tactical-info-det">
      <li><span class="info-key">持续时间：</span><span class="over-ellipsis info-value">{{tacticalInfo?.duration || 1}}分钟</span>
      </li>
      <li><span class="info-key">人数：</span><span class="info-value">{{tacticalInfo?.playerNumber}}</span></li>
      <li><span class="info-key">球：</span><span class="info-value">{{tacticalInfo?.ballNumber}}</span></li>
      <li><span class="info-key">篮筐：</span><span class="info-value">{{tacticalInfo?.basketNumber}}</span></li>
      <li><span class="info-key">锥桶数量：</span><span class="info-value">{{tacticalInfo?.equipmentNumber}}</span></li>
      <li><span class="info-key">是否分组：</span><span class="info-value">{{tacticalInfo?.isGroup?'是':'否'}}</span></li>
      <li><span class="info-key">其他：</span><span class="info-value">{{tacticalInfo?.other}}</span></li>
    </ul>
  </div>
  <div class="tactical-detail">
    <div class="tactical-title">
      <span>战术板</span>
    </div>
    <div class="tactical-box">
      <div class="previous" *ngIf="btnStatus.play || (!btnStatus.play && !btnStatus.pause)"
           [class.end]="!btnStatus.first"
           (click)="btnStatus.first && previous()">
      </div>
      <div class="tactical-canvas" #tactical (click)="pause()"></div>
      <div class="next" *ngIf="btnStatus.play || (!btnStatus.play && !btnStatus.pause)"
           [class.end]="!btnStatus.next"
           (click)="btnStatus.next && next()">
      </div>
      <img id="play" #play *ngIf="btnStatus.play && firstPlay" [src]="getIcon('tactics_play.png')" (click)="start()"
           alt="">
      <div id="rePlay" *ngIf="!btnStatus.play && !btnStatus.pause" (click)="rePlay()">重播</div>
      <!--<div id="rePlay" *ngIf="btnStatus.play && !firstPlay" (click)="start()">重播</div>-->
      <!--<img id="suspended" #suspended *ngIf="btnStatus.pause" [src]="getIcon('tactics_suspended.png')" (click)="pause()" alt="">-->
    </div>
  </div>
  <div class="tactical-des">
    <div class="tactical-title">描述</div>
    <div class="tactical-des-text" [innerHTML]="tacticalInfo?.describe"></div>
  </div>
</seed-content>
